<template>
  <div id="app" @mousedown="setOpenFalse">
    <router-view/>
  </div>
</template>

<script setup>

import {ref, reactive, onMounted} from "vue";

import {useStaticStore} from '@/store/index.js'
const staticStore = useStaticStore()
import {useContentMenuStore} from '@/components/contextMenu/contentMenuStore.js'
const {setOpenFalse} = useContentMenuStore()

// 获取屏幕宽高
const clientWidth = ref(window.innerWidth || document.documentElement.clientWidth ||
    document.body.clientWidth)
const clientHeight = ref(window.innerHeight || document.documentElement.clientHeight ||
    document.body.clientHeight)

//
onMounted(() => {
  staticStore.setWindowSize(clientWidth.value, clientHeight.value)
})

window.onresize = () => {
  clientWidth.value = window.innerWidth || document.documentElement.clientWidth ||
      document.body.clientWidth;
  clientHeight.value = window.innerHeight || document.documentElement.clientHeight ||
      document.body.clientHeight;

  staticStore.setWindowSize(clientWidth.value, clientHeight.value)
}


</script>

<style lang="scss">

:root {
  --clientWidth: v-bind(clientWidth);
  --clientHeight: v-bind(clientHeight);
}

@import "@/styles/index.scss";
</style>
